<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by jarvisframe -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">



    <style>
        /* prevents selection when left click dragging */
        .disable-selection {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select:none;
            user-select:none;
        }
        /* prevents cursor from changing to the i bar on the overlays*/
        .noIbar {
            cursor:default;
        }
    </style>
</head>
<body>
<div class="container">

    <div class="page-header">
        <h1>On-canvas orientation markers</h1>
        <p>
            DICOM Orientation markers (e.g. for Anterior/Posterior, Superior/Inferior, Left/Right) can be determined from direction cosines of the image plane.
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <div class="col-xs-8 col-sm-2">
        <div class="btn-group-vertical" role="group">
            <a id="hFlip" class="btn btn-default">HFlip</a>
            <a id="vFlip" class="btn btn-default">VFlip</a>
            <a id="lRotate" class="btn btn-default">Rotate Left</a>
            <a id="rRotate" class="btn btn-default">Rotate Right</a>
            <a id="reset" class="btn btn-default">Reset</a>
            <a id="load" class="btn btn-default">load</a>
        </div>
    </div>

    <div class="col-xs-12 col-sm-10">
        <div style="width:512px;height:512px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;"
             oncontextmenu="return false"
             class='disable-selection noIbar'
             unselectable='on'
             onselectstart='return false;'
             onmousedown='return false;'>
            <div id="dicomImage"
                 style="width:512px;height:512px;top:0px;left:0px;position:absolute;overflow:hidden;">
            </div>
        </div>
    </div>
</div>
</body>


<!-- jquery - currently a dependency and thus required for using jarvisframeWADOImageLoader -->
<script src="../lib/jquery.min.js"></script>

<!-- include the hammer.js library for touch gestures-->
<script src="../lib/hammer.min.js"></script>

<!-- include the jarvisframe library -->
<script src="../lib/jarvisframe.js"></script>
<script src="../lib/jarvisframeMath.js"></script>

<!-- include the jarvisframe tools library -->
<script src="../lib/jarvisframeTools.js"></script>
<!-- include special code for these examples which provides images -->
<script src="exampleImageLoader.js"></script>
<script src="../js/jarvisMetaDataProvider.js"></script>
<script>
    $('#load').click(function (e) {
        var container = $('#dicomImage');

        var element = container.get(0);
        var imageId = 'example://1';

        jarvisframe.enable(element);

        // Enable mouse and touch input
        jarvisframeTools.mouseInput.enable(element);
        jarvisframeTools.touchInput.enable(element);

        var config = {
            drawAllMarkers: true
        }

        // Comment this out to draw only the top and left markers
        jarvisframeTools.orientationMarkers.setConfiguration(config);

        jarvisframe.loadImage(imageId).then(function(image) {
            alert('12345678987654')
            jarvisframe.displayImage(element, image);

            var viewport = jarvisframe.getViewport(element);

            jarvisframeTools.orientationMarkers.enable(element);

            jarvisframeTools.pan.activate(element, 2);
            jarvisframeTools.zoom.activate(element, 4);

            // Enable all tools we want to use with this element
            jarvisframeTools.rotate.activate(element, 1);
            jarvisframeTools.rotateTouchDrag.activate(element);

            // Add event handlers to flip or rotate the image
            $('#hFlip').click(function (e) {
                viewport = jarvisframe.getViewport(element);
                viewport.hflip = !viewport.hflip;
                jarvisframe.setViewport(element, viewport);
            });

            $('#vFlip').click(function (e) {
                viewport = jarvisframe.getViewport(element);
                viewport.vflip = !viewport.vflip;
                jarvisframe.setViewport(element, viewport);
            });

            $('#lRotate').click(function (e) {
                viewport = jarvisframe.getViewport(element);
                viewport.rotation -=90;
                jarvisframe.setViewport(element, viewport);
            });

            $('#rRotate').click(function (e) {
                viewport = jarvisframe.getViewport(element);
                viewport.rotation +=90;
                jarvisframe.setViewport(element, viewport);
            });

            $('#reset').click(function (e) {
                viewport = jarvisframe.getViewport(element);
                viewport.hflip = false;
                viewport.vflip = false;
                viewport.rotation = 0;
                jarvisframe.setViewport(element, viewport);
            });
        });
    });


</script>
</html>